<template>
  <div class="salary-container">
    <!-- 目标：只让查看工资按钮显示 涨工资按钮不显示 因为当前用户只有查看工资的权限 -->
    <!-- CKGZ -->
    <el-button v-checkBtn="'CKGZ'">查看工资</el-button>
    <!-- ZGZ -->
    <el-button v-checkBtn="'ZGZ'">涨工资</el-button>
  </div>
</template>
<script>
export default {
  name: 'Salary'
}
</script>

<style lang="scss" scoped>
// sfc style支持多种预处理器的 lang指定对应的预处理器
// scss、less 浏览器不认识 loader做转化 -> scc
// 1. 变量
// 2. 嵌套语法  结构统一好理解 嵌套层别太深
// 3. 模块化 js css 解决两个问题：服用 + 好维护

// 补充
// 1. 在哪个 style 语法块中导入  就在那个组件中生效  不是全局的
// 2. ~ 保证别名路径 @（src） 在这里能正确识别 固定的语法
// 3. import vs @impoer import js模块 @import css
// 4. mainjs导入的模块都是全局生效的
// 5. 本地模块
@import '~@/styles/variables.scss';
$hight-color: red;
$border-base: 1px solid #ccc;
.salary-container{
  padding:30px;
  color: $hight-color;
  .salary-text {
    border: $border-base;
    color: $orange;
  }
}
</style>
